<template>
  <h1>测试</h1>
  <div id="w">
  	
  </div>
  <div id="q" style="width: 330px;height:110px ;border: 1px solid red;">
  	
  </div>
  <div  style="width: 330px;height:110px ;border: 1px solid red;">
	 <ww :src='img' :button='true'></ww> 
  </div>
  <div style="height: 1500px;">
	  
  </div>
</template>
<script>
	import ww from '../store/slideshow.vue';
	export default{
		data(){
			return {
				img:[
					require('@/assets/img/tu.jpg'),
					require('@/assets/img/tou.jpg'),
					require('@/assets/img/timg.jpg'),
					require('@/assets/img/newtou.jpg')
				]
			}
		},
		components:{
			ww
		},
		mounted() {
			this.$nextTick(function(){
				var w=document.getElementById('q');
				var c=document.getElementById('w');
				var status=null;
				var x;
				var y;
				var x2;
				var y2;
				w.ontouchstart=function(e){
					 x=e.targetTouches[0].pageX;
					 y=e.targetTouches[0].pageY;
					x=parseInt(x);
					y=parseInt(y);
					c.innerText='x:'+x+',y:'+y;
				}
				w.ontouchmove=function(e){
					
					x2=parseInt( e.targetTouches[0].pageX);
					y2=parseInt( e.targetTouches[0].pageY);
					w.innerText='x:'+x2+',y:'+y2;
					var q1=x2-x;
					var q2=y2-y;
					
					if(Math.abs(q1)>Math.abs(q2))
					{
						e.preventDefault();
					}else if(Math.abs(q1)<Math.abs(q2)){
						//e.preventDefault();
					}
					w.innerHTML+='<br/>x2:'+q1+',y2:'+q2;
					
				}
				w.ontouchend=function(e){
					var t=x2-x;
					var tt=y2-y;
					var we=Math.abs(t)>Math.abs(tt)?true:false;
					if(we)
					{
						var msg=x2>x?'e':'w';
					}
					
					w.innerHTML+='<br/>msg:'+msg;
				}
			})
		}
	}
	
</script>